<template>
  <div class="person-info">
    <div class="person-title">个人信息</div>
    <div class="person-content">
      <div class="itme">
        <div class="label">头像：</div>
        <div class="avatar">
          <el-avatar>
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8000/api/avatar_update/"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
              :auto-upload="true"
              :data="{
                id: id,
              }"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <span v-if="!imageUrl">user</span>
            </el-upload>
          </el-avatar>
        </div>
      </div>
      <div class="itme">
        <div class="label">账户：</div>
        <div class="value">
          <el-text class="mx-1" v-if="!isEdit">{{ userName }}</el-text>
          <el-input
            v-model="userName"
            style="width: 240px"
            placeholder="Please input"
            v-if="isEdit"
            clearable
          />
        </div>
      </div>
      <div class="itme">
        <div class="label">密码：</div>
        <div class="value">
          <el-text class="mx-1" v-if="!isEdit">{{ password }}</el-text>
          <el-input
            v-model="password"
            style="width: 240px"
            v-if="isEdit"
            placeholder="Please input"
            clearable
            maxlength="6"
          />
        </div>
      </div>
      <div class="itme" v-if="isEdit">
        <div class="label">确认密码：</div>
        <div class="value">
          <el-text class="mx-1" v-if="!isEdit">{{ confirmPassword }}</el-text>
          <el-input
            v-model="confirmPassword"
            v-if="isEdit"
            style="width: 240px"
            placeholder="Please input"
            maxlength="6"
          />
        </div>
      </div>
    </div>
    <div class="button">
      <el-button @click.prevent="handClick" v-if="!isEdit">编辑</el-button>
      <el-button type="primary" v-if="isEdit" @click.prevent="confirm">确定</el-button>
      <el-button type="danger" @click="logOut">退出登录</el-button>
    </div>
  </div>
</template>
<script setup>
import "./index.scss";
import { ref, onMounted, watch } from "vue";
import { userinfoUpdate, userinfoSearch } from "@/request/axios";
import { ElMessage } from "element-plus";
import { useRouter, RouterView } from "vue-router";
import { useCounterStore } from "@/stores/counter";
const isEdit = ref(false);
let id = localStorage.getItem("loginId");
let userName = ref();
let password = ref();
let confirmPassword = ref();
let imageUrl = ref("");
const counterStore = useCounterStore();

const beforeAvatarUpload = (file) => {
  // const isJPG = file.type === "image/jpeg";
  // const isLT2M = file.size / 1024 / 1024 < 2;
  // conosle.log(111);
  // // if (!isJPG) {
  // //   conosle.log("上传头像图片只能是 JPG 格式!");
  // // }
  // if (!isLT2M) {
  //   conosle.log("上传头像图片大小不能超过 2MB!");
  // }
  // return isJPG && isLT2M;
};
const handleAvatarSuccess = (response, file, fileList) => {
  imageUrl.value = `http://localhost:8000${response.avatar}`;
  counterStore.setUrl(`http://localhost:8000${response.avatar}`);
  // 假设服务器返回的数据中包含图片的URL
  // const serverResponse = response;
  // if (serverResponse.url) {
  //   conosle.log("上传成功");
  // } else {
  //   conosle.log("上传失败，请重试");
  // }
};
const router = useRouter();
const handClick = () => {
  isEdit.value = true;
};
const getUser = async () => {
  const res = await userinfoSearch({ id: id });
  userName.value = res.data?.username;
  password.value = res.data?.password;
  imageUrl.value = res.data?.avatar;
  counterStore.setUrl(res.data?.avatar);
};
onMounted(() => {
  getUser();
});
const confirm = async () => {
  if (password.value === confirmPassword.value) {
    const res = await userinfoUpdate({
      username: userName.value,
      password: password.value,
      id: id,
    });
    if (res.data.success) {
      ElMessage({
        message: "账户或密码修改成功",
        type: "success",
      });
      router.push("/login");
    }
  } else {
    ElMessage({
      message: "两次密码不一致",
      type: "warning",
    });
  }
  isEdit.value = false;
};

const logOut = () => {
  console.log(111);
  localStorage.setItem("loginId", "");
  router.push("/login");
};
</script>
<style scoped></style>
